/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/
function render() {
  axios({
    url: '/score/list',
    method: 'get',
    params: {}
  }).then(res => {
    //成功回调
    const obj = res.data.data
    /* 封装渲染函数 */
    document.querySelector('tbody').innerHTML = Object.keys(obj).map(item => `
        <tr>
          <th scope="row">${item}</th>
          <td>${obj[item].name}</td>
          <td data-stu_id="${item}" data-batch="1" class="score">${obj[item].score[0]}</td>
          <td data-stu_id="${item}" data-batch="2" class="score">${obj[item].score[1]}</td>
          <td data-stu_id="${item}" data-batch="3" class="score">${obj[item].score[2]}</td>
          <td data-stu_id="${item}" data-batch="4" class="score">${obj[item].score[3]}</td>
          <td data-stu_id="${item}" data-batch="5" class="score">${obj[item].score[4]}</td>
        </tr>`).join('')
  })
}
render()

document.querySelector('tbody').addEventListener('click', function (e) {
  const input = document.createElement('input')
  if (e.target.classList.contains('score')) {
    input.className = 'inp'
    input.value = e.target.innerText
    e.target.appendChild(input)
    // input.focus() 自动聚焦
    input.select() //自动聚焦+自动选中
    input.addEventListener('blur', function () {
      // e.target.removeChild('input')  他杀移除input
      this.remove() //自杀移除input
    })
  }
  const td = e.target
  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      const score = input.value
      const stu_id = td.dataset.stu_id
      const batch = td.dataset.batch
      axios({
        url: '/score/entry',
        method: 'post',
        data: {
          stu_id,
          batch,
          score
        },
      }).then(res => {
        //成功回调
        Toast.info(res.data.message)
        if (res.data.code === 0) {
          render()
        }
      }).catch(err =>{
        Toast.fail(err.response.data.message)
        render()
      })
    }
  })
})

